<template>
  <div class="time-frequency-box">
    <div style="width:100%;font-size: 20px;margin-bottom:40px;">
      <span style="float:left;">用车时间段频次统计</span> <i style="float:right; color:#bfbfbf;cursor: pointer;"
        @click="handlerClose" class="el-icon-error"></i>
    </div>
    <div ref="chart" style="width:100%;height:95%"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLines: [],
      legends: []
    };
  },
  mounted() {
    this.getData();
    this.getEchartData();
  },
  methods: {
    handlerClose() {
      this.$emit('close')
    },


    //加载单车数据
    getData() {
      this.legends = ['青桔单车', '哈罗单车', '永安单车', '美团', '摩拜', '小蓝', '其他'];
      for (var i = 0; i < this.legends.length; i++) {
        this.dataLines.push(this.getDataLines(this.legends[i], [211, 255, 123, 441, 551, 211, 185, 333], this.getRandomLineStyle()))
      }
    },

    //获取随机线条样式
    getRandomLineStyle() {

      const colors = [
        {
          start: 'rgb(128, 255, 165)',
          end: 'rgb(1, 191, 236)'
        },
        {
          start: 'rgb(0,221,255)',
          end: 'rgb(77, 119, 255)'
        },
        {
          start: 'rgb(55,162,255)',
          end: 'rgb(116, 21, 219)'
        },
        {
          start: 'rgb(255,0,135)',
          end: 'rgb(135, 0, 157)'
        },
        {
          start: 'rgb(255,191,0)',
          end: 'rgb(224, 62, 76)'
        },
        {
          start: 'rgb(128,255,165)',
          end: 'rgb(1, 191, 236)'
        },
      ];

      // 生成随机数
      const random = Math.floor(Math.random() * colors.length);

      return this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: colors[random].start
        },
        {
          offset: 1,
          color: colors[random].end
        }
      ])
    },
    getDataLines(plateform, data, lineStyle) {
      var resData = {
        name: plateform,
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          opacity: 0.8,
          color: lineStyle
        },
        emphasis: {
          focus: 'series'
        },
        data: data
      };
      return resData;
    },
    getEchartData() {
      // const data = this.getData();
      var chart = this.$refs.chart;
      var myChart = this.$echarts.init(chart);
      const option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: this.legends
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0:00-3:00', '3:00-6:00', '6:00-9:00', '9:00-12:00', '12:00-15:00', '15:00-18:00', '18:00-21:00', '21:00-24:00']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.dataLines
      };
      myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
/* 大盒子样式 */
.time-frequency-box {
  position: absolute;
  bottom: 10px;
  left: 780px;
  border-radius: 10px;
  width: 590px;
  height: 260px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 145, 255, 0.3);
}
</style>